<template>
  <!-- :href="`#/track/${item.id}`" -->
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <ul class="album">
      <li v-for="item in list" :key="item.id">
        <a>
          <c-item
            :id="item.id"
            :img="item.img"
            :duration="item.duration"
            :playPath="item.playPath"
            :statCountInfo="item.statCountInfo"
            :title="item.title"
            :isPlay="item.isPlay"
            @play-pause="play"
          >
          </c-item>
        </a>
      </li>
    </ul>
     <template #loading>
        <div class="loading">
          <van-loading color="#ff1e00" type="spinner" />
         
          
        </div>
      </template>
  </van-list>
</template>

<script>
import { initZbSoundListlData } from "@/request/api.js";

export default {
  data() {
    return {
      anchorid: 0,
      list: [],
      page: 1,
      loading: true,
      finished: false,
    };
  },
  props: {},
  created() {
    this.anchorid = this.$route.params.id;
    this.initData();
  },
  methods: {
    play(obj){
        console.log(obj)
        this.list.forEach(item => {
            if(item.id == obj.id){
                item.isPlay = obj.isPlay
                this.$emit('play-pause',{playPath:obj.playPath,isPlay:obj.isPlay})
            }else{
                item.isPlay = false
            }
        });
    },
    async initData() {
      let list = [];
      let params = {
        anchorId: this.anchorid,
        page: this.page,
        pageSize: 20,
        asc: false,
      };

      let { data: res } = await initZbSoundListlData(params);

      console.log("声音", res);

      res.data.trackDetailInfos.forEach((item) => {
        let obj = {
          id: item.id,
          title: item.trackInfo.title,
          playPath: item.trackInfo.playPath,
          img: "https://imagev2.xmcdn.com/" + item.trackInfo.cover,
          statCountInfo: item.statCountInfo,
          duration: item.trackInfo.duration,
          isPlay: false,
        };
        list.push(obj);
      });

      this.list.push(...list);

      this.loading = false

      if(list.length == 0){
        this.finished = true
      }
    },

    onLoad(){
      this.page++
      console.log("xx")
      this.initData()
    }
  },
};
</script>

<style lang="scss" scoped>
.album,
.shengyin,
.book {
  padding-left: 15px;
  li {
    border-bottom: 1px solid #f3f4f5;
    a {
      display: block;
    }
  }
}
</style>



